<template>
  <div class="app-container">
    <!-- 游戏列表 -->
    <div class="line"></div>
    <div class="title">
      <p>Fine classification</p>
      <p>There are countless games</p>
      <p>Embark on an exclusive gaming journey!</p>
    </div>
    <ul>
      <li
        v-for="(item, index) in menu_list"
        :key="index"
        @click="handleOpen(item)"
      >
        <p class="name ellipsis">{{ item.name }}</p>
      </li>
    </ul>
    <div class="line"></div>
    <!-- 购买弹窗 -->
    <el-dialog
      v-if="gameList.length"
      v-model="pay_visible"
      :before-close="handleClose"
      width="1000"
      class="pay-dialog"
    >
      <div>
        <p class="game-info">
          You can unlock this game with
          <span>
            {{ category_price }}
          </span>
          coins, and at the same time unlock the same type of games.
        </p>
        <div class="image-list">
          <img
            v-for="item in gameList"
            :key="item"
            :src="item.images[0]"
            alt=""
          />
          <p class="mask"></p>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleRefuse">Refuse</el-button>
          <el-button type="primary" @click="handleSure">Sure</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { productList } from "@/api/product";
import { categories } from "@/api/product";
import { userSpecies, gamePay } from "@/api/user";
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

const route = useRoute();
const router = useRouter();
const store = useStore();

// 获取游戏分类列表
const menu_list = ref([]);
const getProductList = () => {
  categories({
    parent_ids: [
      100286, 100287, 100288, 100290, 100291, 100292, 100293, 100294, 100295,
      100296, 100297, 100298,
    ],
  }).then((res) => {
    menu_list.value = res.data;
    // console.log(menu_list.value);
  });
};
getProductList();

// 点击分类
const pay_visible = ref(false);
const category_id = ref(""); // 当前游戏分类ID
const category_price = ref(480000); // 当前游戏分类价格
const gameList = ref([]); // 当前分类游戏列表
const handleOpen = (item) => {
  category_id.value = item.id;

  // 判断当前分类是否购买
  if (item.purchased) {
    router.push({
      path: "/gameList",
      query: { id: category_id.value },
    });
  } else {
    pay_visible.value = true;

    // 获取当前分类游戏列表
    productList({
      category_id: [item.id],
      page: 1,
      per_page: 100,
    }).then((res) => {
      console.log(res, "123");

      gameList.value = res.data.data;
    });
  }
};

// 确认支付
const handleSure = () => {
  // 判断是否登录
  if (!store.state.userInfo.access_token) {
    ElMessage({
      message: "Please Login First!",
      type: "warning",
    });
    pay_visible.value = false;
    return;
  } else {
    handlePay();
  }
};

// 拒绝支付
const handleRefuse = () => {
  router.push({
    path: "/gameList",
    query: { id: category_id.value },
  });
};

// 支付
const handlePay = () => {
  // 判断余额是否可以购买
  userSpecies().then((res) => {
    // console.log("当前余额", res.data.price);
    // console.log("游戏分类价格", category_price.value);

    if (res.data.price >= category_price.value) {
      // 支付
      gamePay({
        categoryId: category_id.value,
        price: category_price.value,
      }).then((res) => {
        ElMessage({
          message: "Purchase success!",
          type: "success",
        });
        router.push({
          path: "/gameList",
          query: { id: category_id.value },
        });
      });
    } else {
      // 余额不足
      ElMessageBox.confirm("Insufficient balance , need to purchase coins!", {
        confirmButtonText: "sure",
        cancelButtonText: "cancel",
        customClass: "messageBox",
        type: "",
        showClose: false,
      })
        .then(() => {
          router.push("/account/pay");
        })
        .catch(() => {});
    }
  });
};

// 关闭弹窗
const handleClose = () => {
  pay_visible.value = false;
  gameList.value = [];
};
</script>

<style lang="scss" scoped>
.app-container {
  margin-top: 80px;
  background: url("@/assets/game/gameBg.webp") no-repeat;
  background-size: 100% 100%;
  .line {
    width: 2px;
    height: 50px;
    background: #ffa300;
    margin: 0 auto;
    margin-bottom: 40px;
    margin-top: 40px;
  }
  .title {
    font-size: 32px;
    color: #fff;
    text-align: center;
  }
  ul {
    margin: 34px 0 60px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    li {
      padding: 0 5px;
      height: 94px;
      position: relative;
      font-size: 14px;
      text-align: center;
      // background: #5d37cd;
      background: rgba(93, 55, 205, 0.5);
      border: 1px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      color: #fff;
      .name {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        // font-weight: 700;
        z-index: 200;
      }
      &:hover {
        background: none;
        border: 1px solid #5d37cd;
        .name {
          color: #fff;
        }
      }
    }
  }

  ::v-deep .pay-dialog {
    width: 700px;
    background: rgba(28, 33, 40, 1);
    .el-dialog__header {
      position: absolute;
      top: 0px;
      right: -80px;
      .el-dialog__headerbtn {
        padding: 10px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        .el-icon {
          font-size: 30px;
          color: #fff;
        }
        &:hover {
          background: #444;
        }
      }
    }
    .el-dialog__body {
      padding: 10px;
      .game-info {
        margin-bottom: 20px;
        font-size: 14px;
        color: #b4b7b7;
        span {
          font-size: 16px;
          font-weight: 700;
          color: #15a251;
        }
      }
      .image-list {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        img {
          margin: 10px;
          width: 60px;
          height: 60px;
          border-radius: 4px;
          object-fit: contain;
          cursor: pointer;
        }
        /* 遮罩层的基本样式 */
        .mask {
          position: absolute; /* 或者使用 absolute, 根据具体需求 */
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3); /* 半透明黑色背景 */
          z-index: 1000; /* 确保遮罩层位于其他内容之上 */
          cursor: pointer;
        }
      }
    }
    .el-dialog__footer {
      .el-button {
        border: none;
        background: linear-gradient(
          180deg,
          rgba(66, 70, 79, 1) 0%,
          rgba(45, 46, 54, 1) 100%
        );
        box-shadow: inset 0px 1px 2px rgba(150, 146, 146, 0.25),
          0px 2px 2px rgba(0, 0, 0, 0.44);
        color: rgba(255, 255, 255, 1);
      }

      .el-button:last-child {
        background: #15a251;
        box-shadow: inset 0px 1px 2px rgba(150, 146, 146, 0.25),
          0px 2px 2px rgba(0, 0, 0, 0.44);
      }
    }
  }
}
</style>
